<template>
  <div class="chart" ref="chart">
  </div>
</template>

<script>
export default {
  name: 'chart',
  mounted() {
    this.init()
  },
  props: {
    type: {
      type: String,
      default: 'line'
    },
    chartdata: {
      type: Object
    },
    xAxis: {
      type: Object,
      default: function () {
        return {
          splitLine: { show: false },
          axisLine: {
            lineStyle: {
              color: "#fff",
            }
          }
        }
      }
    },
    yAxis: {
      type: Object,
      default: function () {
        return {
          splitLine: { show: false },
          axisLine: {
            lineStyle: {
              color: "#fff",
            }
          },
          max: 200
        }
      }
    },
    grid: {
      type: Object,
    },
    legendColor: { type: String, default: '#FFF' }
  },
  methods: {
    init() {
      const node = this.$refs.chart
      const chart = this.$echarts.init(node)
      let option = {
        dataZoom: [
          {
            start: 0,
            end: 100,
            type: "inside"
          },
        ],
        legend: {
          show: true, data: this.chartdata.name.map(n => { return { name: n } }), itemWidth: 12,
          itemHeight: 12, x: 'center', y: 40, textStyle: { color: this.legendColor, },
        },
        xAxis: this.xAxis || {},
        yAxis: this.yAxis || {},
        tooltip: { trigger: 'axis' },
        color: ['#1abc9c', '#ed7d31'],
        grid: this.grid,
        series: this.chartdata.data.map((item, index) => { return { data: item, type: 'bar', name: this.chartdata.name[index] } }),
      };
      this.xAxis && chart.setOption(option)
    }
  }
}
</script>

<style scoped>
.chart {
  height: 100%;
  width: 100%;
}
</style>